import React, {PropsWithChildren, ReactPropTypes, useMemo} from "react"
import {Select, SelectProps} from "antd";
import {QueryGoodsUnitResponse} from "../apis/GoodsApi";
import {BaseSelectRef} from "rc-select";

export interface GoodsUnitSelectProps extends SelectProps{
    units:QueryGoodsUnitResponse[]
}

/**
 * #为什么 Form.Item 嵌套子组件后，不更新表单值？
 * https://ant-design.antgroup.com/components/form-cn#%E4%B8%BA%E4%BB%80%E4%B9%88-formitem-%E5%B5%8C%E5%A5%97%E5%AD%90%E7%BB%84%E4%BB%B6%E5%90%8E%E4%B8%8D%E6%9B%B4%E6%96%B0%E8%A1%A8%E5%8D%95%E5%80%BC
 */
const GoodsUnitSelect: React.FC<GoodsUnitSelectProps & React.RefAttributes<BaseSelectRef>> = React.forwardRef<BaseSelectRef,GoodsUnitSelectProps>(({units,...props},ref) => {
    const basicUnit = useMemo(() => {
        return units?.find(item => item.basicMultiple === 0)?.name
    }, [units]);
    return (
        <Select ref={ref} {...props} options={units.map(it => ({
            label: <div style={{display: "flex", justifyContent: 'space-between'}}>
                <span>{it.name}</span>
                {it.basicMultiple !== 0 && <span>{it.basicMultiple}{basicUnit}</span>}
            </div>,
            value: it.id,
        }))} style={{width: "100%"}}/>
    )
})

export default GoodsUnitSelect
